<template>
 <!-- flex容器 container -->
  <!-- 侧边栏容器 -->
<el-container>
  <el-aside class="aside" width="200px" >
    <img src="@/assets/images/logo.png" alt="" width="100%">
    <el-menu
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      background-color="#000d1f"
      text-color="#fff"
      active-text-color="#409eff"
      router
      >

      <el-menu-item index="/">
        <i class="el-icon-s-home"></i>
        <span slot="title">数据概览</span>
      </el-menu-item>
      <el-menu-item index="/article" >
        <i class="el-icon-document"></i>
        <span slot="title">内容管理</span>
      </el-menu-item>
      <el-menu-item index="/publish">
        <i class="el-icon-s-promotion"></i>
        <span slot="title">发布文章</span>
      </el-menu-item>
    </el-menu>
  </el-aside>

<!-- 右边视图容器 -->
 <el-container class="right">

  <el-header>
    <span>用户名</span>
    <el-link :underline="false" icon="el-icon-unlock">退出</el-link>
  </el-header>
  <el-main>主体
    <!-- 路由出口 -->
   <router-view/>
  </el-main>

 </el-container>
</el-container>
</template>

<script>

export default {
  name: 'LayoutView'
}
</script>

<style scoped>
.aside{
  background-color: #000d1f;
  height: 100vw;
}

.el-header{
  border-bottom: black solid 1px;
  display: flex;
  justify-content: end;
  align-items: center;
  gap:10px
}
.el-menu{
  border-right: none;
}
</style>
